<template>
<div class="system-menu">
 <search-box placeholder="菜单名称">
      <div class="other-control" slot="other">
          <el-button type="primary" @click="refresh"> 刷新</el-button>
          <el-button type="primary" @click="addUser"><i class="el-icon-circle-plus-outline"></i> 新增</el-button>
          <el-button type="default" @click="deletes"> 删除</el-button>
      </div>
 </search-box>
 <table-list @change="change"></table-list>
 <manage-dialog :outerVisible="showDialog" :types="types" @hideManagementDialog="showDialog = false"></manage-dialog>
</div>
</template>
<script>
import searchBox from './SearchBox'
import tableList from './TableList'
import manageDialog from './ManageDialog'
export default {
    name: 'Menu',
    components: {
        searchBox,
        tableList,
        manageDialog
    },
    data () {
        return {
            types: 1,
            showDialog: false
        }
    },
    methods: {
        addUser () {
            this.types = 1
            this.showDialog = true
        },
        change () {
            this.types = 0
            this.showDialog = true
        },
        deletes () {
            this.$message({
                message: '请选择菜单',
                type: 'warning'
            })
        },
        refresh () {
        }
    }
}
</script>

<style lang="less">
.system-menu {
    background: #fff;
    .split-line {
        display: inline-block;
        width: 1px;
        height: 20px;
        background: #409EFF;
        vertical-align: middle;
    }
}
</style>
